<template>
  <div id="app" class="animate" ref="pages">
    <div id="logo" ref="alogo">
      <div class="inner">
        <img src="/assets/images/logo.png" alt="elloworld">
        <div class="sologan en">Digital creative · MiniGames · WebAR/VR</div>
      </div>
    </div>
    <div id="main" ref="amain">
    <router-view ></router-view>
    </div>
    <cfooter class="footer" ref="afooter"></cfooter>
  </div>
</template>

<script>
import cfooter from './views/footer'
import { addClass, removeClass } from './Utils/class.js'
import { setTimeout } from 'timers';

export default {
  components: {
    'cfooter': cfooter
  },
  data () {
    return {
      'animation': {
        step: 0,
        steps: []
      }
    }
  },
  mounted(){
    let _this = this;
  
    setTimeout(function(){
      addClass(_this.$refs.pages, 'logoShow');
      _this.$refs.alogo.addEventListener('transitionend', _this.startAnimation);
    },300);
    
  },
  methods: {
    startAnimation () {
      let _this = this;

      _this.animation.step ++;
      switch(_this.animation.step) {
        case 1: 
          addClass(_this.$refs.pages, 'logoMove');
          break;
        case 2: 
          addClass(_this.$refs.pages, 'sologanShow');
          _this.$refs.alogo.removeEventListener('transitionend', _this.startAnimation);
          console.log(_this.$refs.amain);
          _this.$refs.amain.addEventListener('transitionend', function(){
            removeClass(_this.$refs.pages, 'animate');
          });
          break;
        default: 
          break;
      }
      
      /*
      console.log('end' + _this.animation.step);
      if(_this.animation.step >= 0) 
        _this.animation.steps[_this.animation.step].el.removeEventListener('transitionend', _this.startAnimation);
      _this.animation.step ++;
      
      if(typeof _this.animation.steps[_this.animation.step] != undefined){
        addClass(_this.$refs.pages, _this.animation.steps[_this.animation.step].class);
        _this.animation.steps[_this.animation.step].el.addEventListener('transitionend', _this.startAnimation);
      }else{
        removeClass(_this.$refs.pages, 'animate');
      }*/
    }
  }
}
</script>


<style lang="less">
@import url(./assets/less/common.less);
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  & > div{
    width: 100%;
  }
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
#logo{
  padding-top: 12vh;
  transition: all 1s;
  img{
    max-width: 45vw;
    width: @logo-width-xxbig;
    display: block;
    margin: 0 auto 10px;
    transform: translateX(18px);
  }
  .sologan{
    font-size: 14px;
    color: #abaaaa;
  }
  @media (max-width: @screen-xxbig-max) {
    img{
      width: @logo-width-xxbig;
      transform: translateX(@logo-width-xxbig * (1 - @r-rate));
    }
  }
  @media (max-width: @screen-xbig-max) {
    img{
      width: @logo-width-xbig;
      transform: translateX(@logo-width-xbig * (1 - @r-rate));
    }
    .sologan{font-size: 12px}
  }
  @media (max-width: @screen-big-max) {
    img{
      width: @logo-width-big;
      transform: translateX(@logo-width-big * (1 - @r-rate));
    }
    .sologan{font-size: 12px}
  }
  @media (max-width: @screen-sm-max) {
    img{
      transform: none;
    }
    .sologan{
      font-size: 2vw;
    }
  }
  @media all and (orientation : landscape) and (max-width: @screen-sm-max) {
    img{
      height: 12vh;
      width: auto;
    }
    .sologan{
      font-size: 2vh;
    }
  }
}
#main{
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  
}

////  动画开始时状态
.animate{
  #logo{
    opacity: 0.3;
    flex: 1 0 100%;
    padding-top: 0;
    transform: translateY(50%);
    .inner{
      transform: translateY(-50%);
    }
  }
  #main{
    opacity: 0;
  }
  .footer{
    flex: 0 0 0;
  }
}

.animate.logoShow{
   #logo{
    transition: all .6s;
    opacity: 1;
  }
  .footer{
    opacity: 0;
    transform: translateY(-60px);
  }
}

.animate.logoMove{
  @time: 2s;
   #logo{
    transition: all @time;
    opacity: 1;
    transform: translateY(0);
    padding-top: 12vh;
    flex: 1 0 50%;
    .inner{
      transition: all @time;
      transform: translateY(0);
    }
  }
  .footer{
    transition: all @time;
    opacity: 1;
    transform: translateY(0);
  }
}

.animate.sologanShow{
  @time: 1.2s;
  #main{
    transition: all @time ;
    opacity: 1;
  }
}
</style>
